<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>付款审核 | PFPay</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 定制版 ionic 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.css">

    <style>
        .myitem{
            padding-left:20px;
            padding-right:20px;
            margin-top:10px;
            margin-bottom:10px;
            display:flex;
        }
        .myitem .left{
            color:grey;
            width:130px;
        }
    </style>
</head>
<body>
<div id="app">
    <von-app>

        <div style="clear:both;height:0;overflow:hidden;">
            <von-header theme="dark">
                <span slot="title">付款审核</span>
            </von-header>
        </div>

        <div class="item item-divider">
            头部暂位
        </div>

        <list>
            <item thin>
                付款信息
            </item>

            <item >
                <div class="myitem">
                    <div class="left">
                        订单ID
                    </div>
                    <div>
                        ${orderId}
                    </div>
                </div>

                <div class="myitem">
                    <div class="left">
                        商户ID
                    </div>
                    <div>
                        ${sellerId}
                    </div>
                </div>
                <div class="myitem">
                    <div class="left">
                        付款方式
                    </div>
                    <div>
                        ${payType}
                    </div>
                </div>
                <div class="myitem">
                    <div class="left">
                        下单时间
                    </div>
                    <div>
                        ${createTime}
                    </div>
                </div>
                <div class="myitem">
                    <div class="left">
                        付款过期时间
                    </div>
                    <div>
                        ${payExpireTime}
                    </div>
                </div>
                <div class="myitem">
                    <div class="left">
                        订单状态
                    </div>
                    <div>
                        ${orderStatus}
                    </div>
                </div>
                <div class="myitem">
                    <div class="left">
                        用户备注
                    </div>
                    <div>
                        ${userRemarks!""}
                    </div>
                </div>


            </item>

        </list>
        <div class="item item-divider">
            审核结果
        </div>

        <von-input
                type="text"
                v-model="auditPassMsg"
                placeholder="审核备注"
                label="审核备注">
        </von-input>

        <md-button class="button button-balanced button-block" @click.native="auditPass()">
            审核通过
        </md-button>
        <von-input
                type="text"
                v-model="auditFailMsg"
                placeholder="没有付款消息"
                label="失败备注">
        </von-input>
        <md-button class="button button-assertive button-block" @click.native="auditFail()">
            审核失败
        </md-button>

    </von-app>
</div>
</body>
<!-- 依赖库 axios/vue/vue-router -->
<script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js"></script>

<!-- vonic 核心文件 -->
<script src="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data(){
            return {
                auditPassMsg:'',
                auditFailMsg:'没有付款信息'
            }
        },
        methods: {
            //审核通过
            auditPass(){
                $dialog.confirm({
                    content: '确定付款状态为通过',
                    okText: '确定'
                }).then((res) => {
                    console.log('confirm result: ', res)
                })

            },
            //审核不通过
            auditFail(){
                $dialog.confirm({
                    content: '确定付款状态为不通过?',
                    okText: '确定'
                }).then((res) => {
                    console.log('confirm result: ', res)
            })
            }

        }
    })
</script>
</html>